<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="__PUBLIC__/Image/logo.ico">

    <title>发布游记</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/Css/lib/bootstrap.min.css" rel="stylesheet" type="text/css">
     <!-- 自定义公共CSS -->
    <link href="__PUBLIC__/Css/Index/common.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		body{
			line-height:1.1;
		}
		
		.strong{
			font-size:50px;
		}
		
		.small{
			font-size:25px;
		}
		
		 a{
			color:white;
			font-weight:bold;
		}
		
		.contains{
			background-color:#C69C6C;
		}
		
		.personcenter-list{
			text-align:right;
			margin-top:30px;
			font-size:40px;
			margin-right:10px;
			line-height:50px;
		}
		
		@media screen and (max-height:800px){
			.personcenter-list{
				margin-right:5px;
				line-height:45px;
			}
		}
		
	</style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="__PUBLIC__/Js/lib/jquery-1.11.2.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap.min.js"></script>
     <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
   <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
   <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
   <script src="__PUBLIC__/Js/Index/common.js"></script>
    <script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    $(function(){
    	// 发布
    	$("#releaseBtn").click(function(){
    		var title = $("input[name='note-title']").val();
    		if($.trim(title) == ""){
    			alert("请输入游记标题");
    			return false;
    		}
    		
    		var detail = ue.getContent();// 获得所有内容
    		if($.trim(detail) == ""){
    			alert("请输入游记内容");
    			return false;
    		}
    		
    		if(confirm("您确认要发布该游记吗？")){
    			var contentTxt = ue.getContentTxt();// 获得纯文本
        		var about = "";// 游记摘要(取前300个字)
        		if($.trim(contentTxt) != ""){
        			if(contentTxt.length > 300){
        				about = contentTxt.substring(0,300);
        			} else {
        				about = contentTxt;
        			}
        		}
        		$("#hiddenDiv").html(detail);
        		var firstImgPath = $($("#hiddenDiv").find("img").get(0)).attr("src");
        		$("#hiddenDiv").html("");
        		
        		$.ajax({
        			url:"__URL__/saveTravelNotes",
    					type:"post",
    					data:"title=" + title +"&detail=" + detail +"&about=" + about +"&first_img_path=" + firstImgPath,
    					dataType:"json",
    					success:function(data){
    						if(data.status == 200){
    							//游记发布成功
    							alert(data.message);
    							window.location.href = "__URL__/travelNotes";
    						} else{
    							alert(data.message);
    						}
    					},
    					error:function(data){
    						
    					}
        		});
    		}
    	});
    });
    
    // 游记标题发生改变时，统计标题字数并反馈到页面
    function titleChanged(){
    	var length = $("input[name='note-title']").val().length;
    	$("#wordCount").text(length);
    }
    </script>
  </head>

  <body>
<div class="myContainer col-xs-12 col-sm-12 col-md-12 col-lg-12" style="min-width:1000px;">
	  <div class="row whole-row" style="height:540px;">
	  		<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 contains" style="height:100%;width:75%;">
	  			<form>
	  			<div class="row" style="height:60px;margin:5px;">
	  			<!--  placeholder="给游记取个好标题，为自己代言~"-->
	  				<input type="text" name="note-title" maxlength=30 onpropertyChange="titleChanged();" oninput="titleChanged();"
	  				style="width:100%;height:100%;border:2px solid white;background-color:#C69C6C;color:white;font-size:30px;">
	  				<div style="color:white;font-size:30px;position:absolute;right:35px;margin-top:-50px;"><span id="wordCount">0</span>/30</div>
	  			</div>
	  			
	  			<div class="row" style="height:400px;margin:5px;margin-top:20px;">
	  				<script id="editor" type="text/plain" style="height:350px;width:100%;" name="myContent">
					  </script> 
	  			</div>
	  			
	  			<div class="row">
	  				<input type="button" class="btn" id="releaseBtn" style="width:150px;
							background-color:#5CB85C;color:white;float:right;
							margin-right:20px;margin-top:8px;font-size:18px;" value="发布">
	  			</div>
	  			</form>
			</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 contains" style="height:100%;margin-left:20px;width:22%;">
				<div class="row" style="color:white;text-align:center;padding-top:80px;">
					<strong class="strong">发布游记</strong><br>
	  				<strong class="small">release notes</strong>
				</div>
				<div class="row personcenter-list" style="">
					<strong><a href="{:U('Index/personalProfile')}">个人资料</a></strong><br>
					<strong><a href="{:U('Index/myMessages')}">我的消息</a></strong><br>
					<strong><a href="{:U('Index/myOrders')}">我的订单</a></strong><br>
					<strong><a href="{:U('Index/accountSecurity')}">账户安全</a></strong><br>
					<strong><a href="{:U('Index/travelNotes')}">我的游记</a></strong>
				</div>
			</div>
	  </div>
      <div style="margin-top:30px;">
	  	<include file="Public:footer" />
	  </div>
	  <div style="display:none" id="hiddenDiv"></div>
</div>
  </body>
</html>
